<template>
    <div class="home">
        <!-- 这是主页 轮播图-->
        <el-carousel height="28vw" :interval="5000" arrow="always" style="line-height: 0;">
            <el-carousel-item v-for="item in prictures" :key="item">
                <img :src="item" alt="" width="100%" style="width:100%;height: auto;" />
            </el-carousel-item>
        </el-carousel>
        <el-main>
            <div class="leftbox">
                <p>医院简介</p>
                <p> 西瓜宠物医院是一家专注于宠物医疗保健的现代化医疗机构。 我们致力于提供高质量的医疗服务，
                    关爱和保护每一只宠物的健康。 作为一家全方位的宠物医疗中心，我们的目标是为宠物提供最优质的医疗护理，
                    以确保它们能够健康快乐地与家人共度美好时光。...<a style="color: #a9a9a9;" href="/front/introduction">更多</a></p>
            </div>
            <div class="rightbox">
                <img src="../../assets/index01.png" />
            </div>
        </el-main>
        <el-main class="fwxm">
            <p>名医堂</p>
            <div class="wzbox">
                <div v-for="item in doctorList" @click="toReserveByDoctor(item.id)">
                    <img :src="getImage(item.image)" alt="" width="258" height="194">
                    <p>{{ item.nickname }}</p>
                    <p>{{ item.description }}</p>
                </div>
              
            </div>
        </el-main>
    </div>
</template>

<script>
export default {
    name: "Home",

    data() {
        return {
            prictures: [
                "http://localhost:8081/common/download?name=banner1.jpg",
                "http://localhost:8081/common/download?name=banner2.jpg",
                "http://localhost:8081/common/download?name=banner3.jpg",
            ],
            doctorList: []
        }
    },
    mounted() {
        this.getFrontDoctorList()
    },
    methods: {
        getFrontDoctorList() {
            //首页--名医生堂 获取医生数据列表 默认前4
            this.request.get("/user/getFrontDoctorList").then(res => {
                var i = 0;
                this.doctorList = res.data
               
                console.log("当前doctorList==>",this.doctorList)
            })
        },
        getImage( image){
            //图片回显
            return "http://localhost:8081/common/download?name=" + image
        },
        toReserveByDoctor(doctorId){
            //名医堂点击图片跳转预约界面函数
            this.$router.push({ path: `/front/my/toreserve`, query: { doctorId: doctorId } })
            
        }
    }
}
</script>

<style lang="less" scoped>
.home {
    background-color: white;
}

.fwxm {
    p {

        font-size: 30px;
        font-weight: 300;
    }
    .wzbox {
        display: flex;
        height: 87%;

        div {
            padding-top: 80px;
            background-color: #eee;
            flex: 1;
            width: 25%;
            height: 84%;

            p:first-child {
                font-size: 18px;
                margin-top: 80px;
            }
            p:last-child{
                width: 80%;
                margin-left: 10%;
                font-size: 14px;
            }
            img {
                text-align: center;
                vertical-align: middle;
                margin: auto;
            }
        }
        div:hover {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            transition: all .9s;
        }
    }

    height: 650px;
    margin:0px 100px;
}

.el-main {

    .leftbox {
        padding-left: 130px;

        p:first-child {
            font-size: 25px;
        }

        p:last-child {
            font-size: 15px;
            color: darkgray;
        }
    }

    .rightbox {
        img {
            width: 500px;
            height: 250px;
        }
    }

    .leftbox,
    .rightbox {
        float: left;
        width: 50%;
        height: 300px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    color: #333;
    text-align: center;

    padding: 0;
}
</style>